<template>
	<view class="dealers-page">
		<y-cubar title="车商中心" :bgColor="`rgba(255,255,255,${opacity})`" />
		<view class="dealers-page-bg"></view>
		<view class="con">
			<view class="userinfo">
				<image class="avatar" :src="userInfo.avatar || '/static/user/avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<view class="name">{{ info.merchantName }}</view>
					<view class="phone">{{ info.cellphone }}</view>
				</view>
				<view class="tag">{{ userInfo.userType == 'PERSON_MERCHANT' ? '个人商家' : '自营商家' }} </view>
			</view>
			<view class="card">
				<view class="nums">
					<view class="nums-item">
						<view class="num">{{ userInfo.totalRevenue }}</view>
						<view class="name">总收益</view>
					</view>
					<view class="nums-item">
						<view class="num">{{ userInfo.balance }}</view>
						<view class="name">可提现收益</view>
					</view>
				</view>
				<view class="btns">
					<button class="cu-btn" @click="handJump('/pagesA/dealers/detail')">明细</button>
					<button class="cu-btn" @click="handJump('/pagesA/user/withdrawal')">提现</button>
				</view>
			</view>
			<view class="card">
				<view class="nav-bar">
					<view class="name">订单管理</view>
					<view class="more" @click="handJump('/pagesA/dealers/order')">
						<text>全部订单</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="grid">
					<view class="grid-item" @click="handJump('/pagesA/dealers/order?curren=1')">
						<view class="num">
							{{ orderNum.confirmCount }}
						</view>
						<view class="label">待确定</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/dealers/order?curren=2')">
						<view class="num">
							{{ orderNum.underwayCount }}
						</view>
						<view class="label">进行中</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/dealers/order?curren=3')">
						<view class="num">
							{{ orderNum.depositCount }}
						</view>
						<view class="label">退押金</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/dealers/order?curren=4')">
						<view class="num">
							{{ orderNum.finishCount }}
						</view>
						<view class="label">已完成</view>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="nav-bar">
					<view class="name">常用工具</view>
				</view>
				<view class="ads">
					<view class="ad" @click="handJump('/pagesA/dealers/carHome')">
						<image src="/static/icon/car.png" mode=""></image>
						<text>车辆管理</text>
					</view>
					<view class="ad" @click="handJump('/pagesA/demand/shopOrder')">
						<image src="/static/icon/order.png" mode=""></image>
						<text>抢单大厅</text>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="nav-bar">
					<view class="name">已抢需求</view>
					<view class="more" @click="handJump('/pagesA/order/demand')">
						<text>全部订单</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</view>
				<view class="grid">
					<view class="grid-item" @click="handJump('/pagesA/order/demand?curren=1')">
						<view class="num">
							{{ demandNum.waitRecommendCount }}
						</view>
						<view class="label">待推荐</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/order/demand?curren=2')">
						<view class="num">
							{{ demandNum.recommendCount }}
						</view>
						<view class="label">已推荐</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/order/demand?curren=4')">
						<view class="num">
							{{ demandNum.transactionCount }}
						</view>
						<view class="label">已成交</view>
					</view>
					<view class="grid-item" @click="handJump('/pagesA/order/demand?curren=3')">
						<view class="num">
							{{ demandNum.notTransactionCount }}
						</view>
						<view class="label">未成交</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		doMerchantInfo,
		doGeDemandSum,
		doGeOrderSum
	} from '@/apis/user.js'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import {
		storeToRefs
	} from 'pinia'
	import YCubar from '@/components/y-cubar/index.vue'

	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo
	} = storeToRefs(useStore)


	const info = ref({})
	const init = async () => {
		const data = await doMerchantInfo()
		info.value = data
	}

	const handJump = (url) => {
		uni.navigateTo({
			url
		})
	}

	const orderNum = ref({
		confirmCount: 0,
		underwayCount: 0,
		depositCount: 0,
		finishCount: 0,
	})
	const demandNum = ref({
		waitRecommendCount: 0,
		recommendCount: 0,
		transactionCount: 0,
		notTransactionCount: 0
	})

	onLoad(() => {
		init()
		Promise.all([doGeDemandSum(), doGeOrderSum()]).then(res => {
			demandNum.value = res[0]
			orderNum.value = res[1]
		})
	})

	const opacity = ref(0)
	onPageScroll((e) => {
		const childerOpa = Number((e.scrollTop / 200).toFixed(2))
		opacity.value = childerOpa >= 1 ? 1 : childerOpa
	})
</script>

<style lang="scss" scoped>
	.dealers-page {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 50rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);

		&-bg {
			width: 750rpx;
			height: 572rpx;
			background: linear-gradient(179deg, #FFEFC9 0%, #F5F5F5 100%);
			position: absolute;
			top: 0;
		}

		.con {
			position: relative;
			z-index: 3;
			padding: 0 24rpx;

			.userinfo {
				padding-top: 60rpx;
				padding-bottom: 22rpx;
				display: flex;
				align-items: center;
				position: relative;

				.avatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
				}

				.info {
					flex: 1;
					margin-left: 24rpx;

					.name {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.phone {
						margin-top: 8rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.tag {
					position: absolute;
					right: -24rpx;
					background: #FFD634;
					border-radius: 24rpx 0rpx 0rpx 24rpx;
					padding: 10rpx 22rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

			.ads {
				margin-top: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.ad {
					width: 298rpx;
					height: 130rpx;
					background: #FFF7E4;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&:last-child {
						margin-left: 32rpx;
						background: #EBF2FF;
					}

					image {
						width: 76rpx;
						height: 76rpx;
					}

					text {
						margin-left: 24rpx;
						font-size: 30rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}

			.card {
				margin-top: 24rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 24rpx;
				box-sizing: border-box;

				.nums {
					padding-top: 30rpx;
					display: flex;

					&-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 48rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.name {
							margin-top: 12rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular,
								PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.btns {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 60rpx 0 20rpx 0;

					.cu-btn {
						width: 284rpx;
						height: 76rpx;
						border-radius: 40rpx 40rpx 40rpx 40rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
						border: 1rpx solid #999999;
						background-color: rgba(255, 255, 255, 0);

						&:last-child {
							margin-left: 32rpx;
							background-color: #FFC434;
							border-color: #FFC434;
						}
					}
				}

				.nav-bar {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
					}

					.more {
						display: flex;
						align-items: center;
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.grid {
					margin-top: 40rpx;
					display: flex;
					align-items: center;

					&-item {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.num {
							font-size: 40rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #333333;
						}

						.label {
							margin-top: 12rpx;
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>